<template>
  <div class="page">
    <div class="scroll">
      <div class="title">风险配置表</div>
      <el-table
        :data="data"
        style="width: 100%; padding: 40px"
        :row-key="rowKey"
        default-expand-all
        :tree-props="{ children: 'methods' }">
        <el-table-column width="350px" :formatter="getPackage" label="package"></el-table-column>
        <el-table-column width="250px" :formatter="getClass" label="class"></el-table-column>
        <el-table-column width="250px" :formatter="getMethod" label="method"></el-table-column>
        <el-table-column :formatter="getRisk" label="风险等级"></el-table-column>
        <el-table-column :formatter="getDesc" label="描述"></el-table-column>
      </el-table>
    </div>
    <div class="actions">
      <div class="total">总数：{{ total.length }}</div>
      <el-pagination small background layout="prev, pager, next, jumper"
                     :total="total.length" :page-size="pageSize" @current-change="changePage"></el-pagination>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import riskHelper from "@/helper/RiskHelper";

export default {
  name: "RiskTable",
  data() {
    return {
      pageSize: 20,
      total: [],
      data: []
    }
  },
  mounted() {
    let loading = Loading.service({
      lock: true,
      text: '加载中',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    riskHelper.loadRisks().then(res => {
      this.total = res
      this.changePage(1)
    }).finally(() => {
      loading.close()
    })
  },
  methods: {
    rowKey(row) {
      if (row.method) return row.parent + row.method
      else return this.getQualifiedName(row)
    },
    getPackage(row) {
      return row.packageName || '-'
    },
    getClass(row) {
      return row.className || '-'
    },
    getMethod(row) {
      return row.method || '-'
    },
    getDesc(row) {
      return row.desc || '无'
    },
    getRisk(row) {
      const risk = this.getRiskLevel(row)
      return risk === '风险未知' ? '-' : risk
    },
    riskSort(a, b) {
      const sa = a.riskLevel
      const sb = b.riskLevel
      if (a.riskLevel === undefined) return 1
      if (b.riskLevel === undefined) return -1
      if (sa < sb) return 1
      if (sa > sb) return -1
      return 0
    },
    changePage(page) {
      this.data = this.total.slice((page - 1) * this.pageSize, page * this.pageSize)
    }
  }
}
</script>

<style lang="stylus" scoped>
.page
  display flex
  flex-direction column

  width 100%
  height 100%
  padding-top 46px
  box-sizing border-box

  .scroll
    flex 1
    overflow hidden
    overflow-y auto

  .title
    font-size 32px
    color #333
    margin-left 40px
    margin-top 30px

  .actions
    display flex
    align-items center

    height 42px
    background white
    border-top #eee 1px solid
    box-shadow 0 0 4px #eee
    z-index 998
    padding 0 40px

    .total
      flex 1
      font-size 12px
      color #999
</style>
